import { Card, Button, Image } from "antd";
import { changeDrawerState } from "@/store/modules/themeStore";
import {
  changeisAddState,
  changeAssInfoState,
  changeaddImgState,
  changeupdateState,
} from "@/store/modules/assStore";
import { useAppDispatch, useAppSelector } from "@/store/hook.ts";
import { deleteCpuInfo } from "@/api/api_cpu";
import { deleteCenterInfo } from "@/api/api_center";
import { deleteGpuInfo } from "@/api/api_gpu";
import { deleteMemoryInfo } from "@/api/api_memory";
import { deleteHddInfo } from "@/api/api_hdd";
import { deleteSddInfo } from "@/api/api_ssd";
const AssCard = (props: any) => {
  const { data, type } = props;
  const update = useAppSelector((state) => state.ass.update);
  const dispatch = useAppDispatch();

  const ChangeInfo = () => {
    dispatch(changeisAddState(false));
    dispatch(changeaddImgState(0));
    dispatch(changeDrawerState(true));
    dispatch(changeAssInfoState(data));
  };

  const DeleteInfo = async () => {
    try {
      type === "CPU" && (await deleteCpuInfo(data._id));
      type === "Center" && (await deleteCenterInfo(data._id));
      type === "GPU" && (await deleteGpuInfo(data._id));
      type === "Memory" && (await deleteMemoryInfo(data._id));
      type === "HDD" && (await deleteHddInfo(data._id));
      type === "SDD" && (await deleteSddInfo(data._id));
      dispatch(changeupdateState(!update));
    } catch (error) {
      console.log(error);
    }
  };

  return (
    <div>
      <Card
        style={{ maxWidth: 250 }}
        hoverable
        cover={
          <Image width={250} style={{ padding: 1 }} src={data.img_url_arr[0]} />
        }
        actions={[
          <Button onClick={ChangeInfo}>修改</Button>,
          <Button danger onClick={DeleteInfo}>
            删除
          </Button>,
        ]}
      >
        {type === "CPU" && (
          <p style={{ fontWeight: "bold", textAlign: "center", fontSize: 18 }}>
            {data.manufacturers}-{data.series}-{data.code_name}
          </p>
        )}
        {type === "Center" && (
          <p
            style={{
              fontWeight: "bold",
              textAlign: "center",
              fontSize: 16,
              textOverflow: "ellipsis",
              overflow: "hidden",
              whiteSpace: "nowrap",
            }}
          >
            {data.series}
          </p>
        )}
        {type === "GPU" && (
          <p
            style={{
              fontWeight: "bold",
              textAlign: "center",
              fontSize: 16,
              textOverflow: "ellipsis",
              overflow: "hidden",
              whiteSpace: "nowrap",
            }}
          >
            {data.codeName}
          </p>
        )}
        {type === "Memory" && (
          <p
            style={{
              fontWeight: "bold",
              textAlign: "center",
              fontSize: 16,
              textOverflow: "ellipsis",
              overflow: "hidden",
              whiteSpace: "nowrap",
            }}
          >
            {data.manufacturers}
          </p>
        )}
        {type === "HDD" && (
          <p
            style={{
              fontWeight: "bold",
              textAlign: "center",
              fontSize: 16,
              textOverflow: "ellipsis",
              overflow: "hidden",
              whiteSpace: "nowrap",
            }}
          >
            {data.manufacturers}
          </p>
        )}
        {type === "SSD" && (
          <p
            style={{
              fontWeight: "bold",
              textAlign: "center",
              fontSize: 16,
              textOverflow: "ellipsis",
              overflow: "hidden",
              whiteSpace: "nowrap",
            }}
          >
            {data.manufacturers}
          </p>
        )}
      </Card>
    </div>
  );
};

export default AssCard;
